<template>
  <div>
    <introduce
      title="企业三级安全教育专项培训系统"
      text="（生产经营类企业/园区）"
      iconfont="icon-a-bianzu63"
      :content="content"
      :img="img"
    >
      <div class="module1" slot="module1">
        <div class="title">系统功能</div>
        <div class="content">
          <div class="item" v-for="(item, index) of module1List" :key="index">
            <p class="text1">{{ item.title }}</p>
            <div
              style="
                margin-bottom: 20px;
                width: 16px;
                height: 1px;
                background: #333333;
              "
            ></div>
            <p class="text2">{{ item.text }}</p>
          </div>
        </div>
      </div>
      <div class="module2" slot="module2">
        <div class="title">系统优势</div>
        <div class="content">
          <div
            class="item"
            :style="{ background: `url(${item.bg})` }"
            v-for="(item, index) of module2List"
            :key="index"
          >
            <p class="text1">{{ item.title }}</p>
            <p class="text2">{{ item.text }}</p>
          </div>
        </div>
      </div>
    </introduce>
  </div>
</template>

<script>
import introduce from "@/components/introduceTHEjob.vue";
export default {
  components: {
    introduce,
  },
  data() {
    return {
      module1List: [
        {
          title: "可视化数据中心",
          text: "将培训过程静态数据及动态运行数据进行有效的整合，实现培训进度、培训情况完成率、考试完成情况、考试合格率、培训效果等数据的实时分析及呈现，让安全管理人员一目了然掌握培训情况，实施安全生产教育培训全过程的监管。",
        },
        {
          title: "基础库管理",
          text: "构建培训数据库，涵盖目录管理、题库管理、试卷管理、课件管理等模块。根据企业行业类型，匹配符合培训大纲要求的相关课程，支持自主维护、选择试题，灵活生成试卷，保证培训质量。",
        },
        {
          title: "企业管理",
          text: "建立组织机构，培训计划根据部门、角色、岗位等进行多维度下发，提高培训课程下发的精准度。导入员工基础信息表，自动生成员工学习账号，操作便捷。员工学习完成后，自动生成“一人一档”。",
        },
        {
          title: "培训管理",
          text: "年初制定培训计划，根据计划实施培训。未纳入计划的日常培训可在培训实施中自主添加。支持“年度安全培训计划”和“年度安全教育培训管理台账”一键导出打印，形成一企一档。培训记录统计实现实时监管，线下培训轻松上传，实施线上线下同步管理。",
        },
        {
          title: "安全教育考试",
          text: "通过平台实现考试数据统计以及考试管理，如考试人员、分数、通过率等基本信息的查看与管理。",
        },
      ],
      module2List: [
        {
          title: "专业化",
          text: "解决企业安全教育资源与培训能力的不足，让安全生产培训更加专业化",
          bg: require("@/assets/introduce/qyaq/bg1.png"),
        },
        {
          title: "便捷化",
          text: "基于互联网手段，突破线下培训耗时费力的难题，实现碎片时间随时随地开展学习。",
          bg: require("@/assets/introduce/qyaq/bg2.png"),
        },
        {
          title: "体系化",
          text: "平台各模块构成一个完整的培训体系，培训进度全程记录，让安全生产培训体系化、流程化。",
          bg: require("@/assets/introduce/qyaq/bg3.png"),
        },
        {
          title: "精准化",
          text: "根据培训类型及人员岗位匹配培训内容，实现对不同部门、不同专业、不同人群的课程精准配置。",
          bg: require("@/assets/introduce/qyaq/bg4.png"),
        },
        {
          title: "可视化",
          text: "培训过程进度实时监管，全流程掌握学员学习进度及学习效果，培训结束自动生成报告。",
          bg: require("@/assets/introduce/qyaq/bg5.png"),
        },
        {
          title: "档案化",
          text: "通过后台管理，实现员工信息维护、备案管理、学习监督、绩效考核等，自动生成学习档案，一键打印一人一档、一企一档。",
          bg: require("@/assets/introduce/qyaq/bg6.png"),
        },
      ],
      img: require("@/assets/introduce/qyaq/img.png"),
      content:
        "泰捷云学企业三级安全教育专项培训系统，为企业新入职、在职员工提供厂级（公司级）、车间级（部门级）、岗位（班组级）安全教育培训，通过可定制化科目建设，分配不同课程题库，对不同等级的安全培训提供有针对性的内容安排，满足不同岗位员工的安全能力要求，提高企业在安全管理方面的能力，使企业建立起有效的安全文化，确保企业及员工长期处于安全状态。",
    };
  },
};
</script>

<style lang="scss" scoped>
.module1 {
  width: 100%;
  height: 619px;
  background: url("@/assets/introduce/qyaq/modulebg1.png");
  overflow: hidden;
  .title {
    text-align: center;
    font-size: 36px;
    font-weight: 500;
    color: #333333;
    line-height: 50px;
    letter-spacing: 3px;
    margin-top: 100px;
    margin-bottom: 50px;
  }
  .content {
    margin: auto;
    width: 1320px;
    height: 376px;
    display: flex;
    justify-content: space-between;

    .item {
      width: 240px;
      height: 320px;
      background: #fff;
      box-sizing: border-box;
      padding: 24px 24px 0;
      img {
        margin: auto;
      }
      p {
        width: 100%;
        margin: auto;
        text-align: left;
      }
      .text1 {
        font-size: 16px;
        font-weight: 400;
        color: #1f1f1f;
        line-height: 22px;
        margin: 0 auto 12px;
      }
      .text2 {
        font-size: 15px;
        font-weight: 400;
        color: #666666;
        line-height: 21px;
      }
    }
  }
}
.module2 {
  width: 100%;
  height: 666px;
  background: url("@/assets/introduce/qyaq/modulebg2.png");
  overflow: hidden;
  .title {
    text-align: center;
    font-size: 36px;
    font-weight: 500;
    color: #333333;
    line-height: 50px;
    letter-spacing: 3px;
    margin-top: 100px;
    margin-bottom: 50px;
  }
  .content {
    margin: auto;
    width: 1320px;
    height: 454px;
    display: flex;
    justify-content: space-between;
    align-content: space-between;
    flex-wrap: wrap;

    .item {
      width: 410px;
      height: 211px;
      background: #ffffff;
      box-shadow: 0px 6px 16px 2px rgba(0, 82, 217, 0.1);
      border-radius: 12px;
      box-sizing: border-box;
      padding: 80px 0 0 36px;
      img {
        margin: auto;
      }
      p {
        width: 100%;
        margin: auto;
        text-align: center;
      }
      .text1 {
        font-size: 24px;
        font-weight: 500;
        color: #101010;
        line-height: 33px;
        margin: auto;
        text-align: left;
        margin-bottom: 16px;
      }
      .text2 {
        text-align: left;
        font-size: 16px;
        font-weight: 400;
        color: #999999;
        line-height: 22px;
      }
    }
  }
}
</style>